Most Internet Service Providers give free web space with accounts, yet
only around 20% of subscribers use this space to for any kind of web
site. There are a lot of reasons why people don't use their web space,
but the one that doesn't count is that creating web pages is
difficult, it isn't.
You may hear people talking about "HTML coding", or even "programming"
web pages, but it is nothing so complicated as that. Web pages are
created using HTML (HyperText Markup language), this is just a mixture
of plain text and markup "tags". For example
<B>Here is some text</B>
would appear as bold text, because it is surrounded by the <B> and
</B> tags to show where the bold type should start and end, it really
can be as simple as that. More complex web sites can involve a lot
more, but the basics are very straightforward.
Rather than taking each aspect of HTML in isolation, we will start
with a basic home page and add features each month as we cover a
different part of HTML. Before we do that, let's look at the basic
types of HTML tags we need to know about.
Tags
An HTML tag is a keyword enclosed in "<>" symbols, there are a large
range of tags available but most of them either:
Change the way text is displayed
Include another file in the page, such as an image or sound
Provide a link to another page or site
Mark a place in the page
Many tags are referred to a "containers", that is they have a start
tag and an end tag, which affect whatever is contained within them.
The end tag is the same as the start tag, with a "/" before the
keyword, like the <B>bold text</B> example before. Tags can be written
in lower case or capitals, the browser doesn't care, although many
people use capitals to distinguish the tags from the text when editing
their pages.
There are four tags that are required in all web pages, <HTML>,
<HEAD>, <TITLE> and <BODY>, together with their closing tags. <HTML>
should be the first thing in the page, it tells the browser and web
server that this is a web page and not some other type of file, the
document should end with </HTML>.
Next you need a section contained in <HEAD>...</HEAD>. This
information is not displayed in the browser window but can be used to
hold a variety of information about the page. <TITLE>...</TITLE> needs
to go in the HEAD section, this is the title of the page, as displayed
in the title bar of the browser window.
Finally, <BODY>...</BODY> contains the text to be displayed, together
with it's markup tags. So a bare bones HTML page would be
<HTML>
<HEAD>
<TITLE>My home page</TITLE>
</HEAD>
<BODY>
Some boring stuff about me, blah, blah...
</BODY>
</HTML>
Hardly the World's most exciting web site, but it works.
A real world example
A more useful web site would be one that provides information about
your local town, and that's what we are going to work with throughout
this series of tutorials. This month we'll set up a basic page and
expand it as we cover the various features available through HTML.
Each page on a web site is saved as a separate file, with a .html
extension. The usual name for the first page is index.html, although
some systems use home.html or main.html, check with your ISP. Listing
1: shows the HTML of the first page, Figure 1: shows one possible
representation of it in a browser.
The first five lines use tags we have already covered, line six
introduces <H2>. Most text on a page is displayed in the default font,
as set in your browser preferences, but it is normal to display
headings and sub headings in a larger or bolder font. Look in the
fonts section of your browser preferences and you will see settings
for six headline fonts. These are represented by the tags <H1> to
<H6>, with <H1> being the largest. Normally <H5> and <H6> are smaller
than your normal text font and are used for footnotes and suchlike.
After the closing </H2> tag, the text reverts to the default font.
A web browser will format text to fit in the display window, taking no
notice of line breaks, tabs or multiple spaces in the original HTML.
All of these are displayed as a single white space. It doesn't matter
whether your HTML contains
A line of text.
or
A
line
of
text.
they both appear the same.
That's why the <P> tag appears in the example, it tells the browser to
start a new paragraph, leaving a blank line after the previous one.
<BR> does a similar thing, but without the blank line.
Adding pictures
A page containing nothing but text is going to look a bit boring, so
let's add a picture with the <IMG> tag. The tags we have looked at so
far each consist of a single word, <IMG> shows that a tag can also
have attributes. These contain further information to be used in
displaying the tag. They appear after the tag name separate from it
and each other by spaces. Many tag attributes take a value, which
should usually be enclosed in quotes.
<IMG SRC="map.gif" ALT="Road map" WIDTH="450" HEIGHT="237">
<IMG> displays an image at the current position in the text, on this
page it has <P> tags before and after to make sure it appears on a
line by itself. Try removing these to see the difference they make.
The most important attribute is SRC, it specifies the image file to be
displayed here. In this case it shows only the file name, since the
file is in the same directory as the HTML file. ALT contains text to
be shown by the browser if you have image loading turned off, or while
you are waiting for the image to load. The WIDTH and HEIGHT values
tell the browser how much space to allocate for the image. If you
don't give this the browser will have to redraw the entire page once
the images starts loading and it gets the size from the image file,
this is why some web pages redraw several times in quick succession
when loading images, because the author didn't bother with size
attributes.
Linking
The last tag we will look at this month is <A>, used to define a link,
in this case a mailto link so people can contact the page author by
email. As with <IMG>, <A> has an attribute, HREF, that specifies the
destination of the link, your email address here. It is also used to
link to other pages on your site or others, or even other sections of
the same document. We will cover this in detail next month.
Finally we close the <BODY> and <HTML> tags at the end of the document
and save it as index.html. That's it, that's all there is to creating
a basic web page, and a foundation for a complete web site.
BOXOUTS
Listing 1: The HTML for our first web page
<HTML>
<HEAD>
<TITLE>Penketh Home Page</TITLE>
</HEAD>
<BODY>
<H2>Welcome to Penketh</H2>
Penketh is on the outskirts of Warrington...
<P>
More text
<P>
<IMG SRC="map.gif" ALT="Road map" WIDTH="450" HEIGHT="237">
<P>
Please send any comments on this site to <A HREF="mailto:webmaster@home.com">the webmaster</A>.
</BODY>
</HTML>
Web page creation software
==========================
There are several web page creation programs available, some of which
claim to give WYSIWYG (What You See Is What You Get) editing. This is
not possible because HTML is a markup language, it is not WYSIWYG like
a word processor or Postscript. It tells the browser how you want each
item rendered, relative to the rest of the document, but it doesn't
specify explicit size or positioning.
HTML is an ordinary text file, all the markup tags are plain text, so
a text editor is all you need. In fact, starting HTML with a text
editor gives you a much better understanding of what's going on, and
makes it easier to cope when things don't work out quite as you
expected.
There are some programs that make the writing of HTML more convenient,
such as WebPlug, or there are HTML extensions for text editors that
have much the same effect. AWeb comes with HTML Heaven, an add on for
many text editors to handle much of the donkey work of inserting tags
into the text. My favourite is to use the GoldED text editor with its
own HTML add on.
Because HTML is not WYSIWYG, it is important to check how your page
appears in as many bowser configurations as possible. Even resizing
the browser window, or opening it on a different depth screen, can
significantly alter the appearance of your page. Compare Figure 1 with
Figure 2, both are the same page viewed in the same browser, but with
different screenmode and font settings.
CAPTIONS
Figure 1: Our first web page, in all it's glory.
Figure 2: The same page in the same browser, but with different
settings in the browser preferences.